<script setup lang="ts">
/**
 * @desc UserTask
 * @author DragonTeam <https://www.bpmport.com>
 * @since 2024/10/30 15:06
 */

import { User } from 'lucide-vue-next'
import type { PropType } from 'vue'
import { computed } from 'vue'

import type { BaseNode } from '@/types'
import { approvalObjectOptions } from '@/configuration/enums'

defineOptions({ name: 'UserTask' })
const $props = defineProps({
  node: {
    type: Object as PropType<BaseNode>,
    required: true,
  },
})
const doEmit = defineEmits(['update:node'])
const vModelNode = computed<BaseNode>({
  get: () => $props.node,
  set: val => doEmit('update:node', val),
})

// const assigneeType = computed<string>({
//   get: () => vModelNode.value.businessData?.assigneeType as string,
//   set: val => vModelNode.value.businessData.assigneeType = val,
// })
const approvalObject = computed<number>({
  get: () => vModelNode.value.businessData?.approvalObject as number,
  set: val => vModelNode.value.businessData.approvalObject = val,
})
const candidateUsers = computed<any[]>({
  get: () => vModelNode.value.businessData?.candidateUsers as any[] || [],
  set: val => vModelNode.value.businessData.candidateUsers = val,
})
const candidateGroups = computed<any[]>({
  get: () => vModelNode.value.businessData?.candidateGroups as any[] || [],
  set: val => vModelNode.value.businessData.candidateGroups = val,
})

// 更新审批对象时清空审批人和审批角色
function updateCandidateConfig() {
  vModelNode.value.businessData.candidateUsers = []
  vModelNode.value.businessData.candidateGroups = []
}
</script>

<template>
  <a-collapse-item key="UserTask">
    <template #header>
      <User :size="16" />
      审批人
    </template>

    <EditItem label="审批对象">
      <validate-select v-model="approvalObject" :options="approvalObjectOptions" @change="updateCandidateConfig" />
    </EditItem>
    <EditItem v-if="approvalObject === 2" label="选择审批人">
      <user-tag-input v-model:data="candidateUsers" />
    </EditItem>
    <EditItem v-if="approvalObject === 3" label="选择审批角色">
      <role-tag-input v-model:data="candidateGroups" />
    </EditItem>
  </a-collapse-item>
</template>
